.GroupIntroduction h2 {
    color: aliceblue;
}

.GroupIntroduction {
    padding: 10vh;
}

#Leaders,
#Pi,
#Wet-Lab,
#Wiki,
#Design,
#PublicityModelingBusinessGroup {
    padding-bottom: 5vh;
    padding-top: 20px;
}

.cards {
    display: flex;
    justify-content: center;

    align-items: center;
    justify-content: space-around;
    margin: 30px 0px;
}

.card,
.Leadercard {

    width: 280px;
    height: 400px;
    position: relative;
    border-radius: 20px;
    box-shadow: 15px 15px 35px #0f1e82;
    overflow: hidden;
}

.card,
.Leadercard .poster {
    position: relative;
    overflow: hidden;
}



.card .poster::before {
    content: '';
    position: absolute;
    bottom: -180px;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #2b46ff 50%, transparent);
    transition: 0.5s;
    z-index: 1;
}

.card:hover .poster::before {
    bottom: 0px;
}

.poster img {
    width: 100%;
    transition: 0.5s;
}

.card:hover .poster img {
    transform: translateY(-50px);
    filter: blur(5px);
}

.card .details {
    position: absolute;
    top: 280px;
    bottom: -260px;

    left: 0;
    padding: 20px;
    width: 100%;
    z-index: 2;
    transition: 0.5s;
}

#Alexander .details {
    position: absolute;
    top: 210px;
    bottom: -255px;

    left: 0;
    padding: 20px;
    width: 100%;
    z-index: 2;
    transition: 0.5s;
}



#ShuangLi .details {
    position: absolute;
    top: 255px;
    bottom: -260px;

    left: 0;
    padding: 20px;
    width: 100%;
    z-index: 2;
    transition: 0.5s;
}

#Huang .details {
    position: absolute;
    top: 240px;
    bottom: -260px;

    left: 0;
    padding: 20px;
    width: 100%;
    z-index: 2;
    transition: 0.5s;
}

.card:hover .details {
    top: 70px;
    bottom: 20px;
}

#Alexander:hover .details {
    top: 0px;
    bottom: 20px;
}

#ShuangLi:hover .details {
    top: 20px;
    bottom: 20px;
}

#Huang:hover .details {
    top: 20px;
    bottom: 20px;
}

.card .details h3 {
    font-size: 30px;
    color: aliceblue;
}

.card .details .tag {
    position: relative;
    margin-top: 5px;
}

.card .details .tag span {
    padding: 5px;
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.card .details .major {
    position: relative;
    margin-top: 5px;
}

.card .details .major span {
    padding: 5px;
    color: rgb(255, 255, 255);

}

.card .details .info {
    padding: 0px 2px;
    color: rgb(225, 225, 225);
    font-size: 20px;
    margin-top: 10px;
    word-wrap: break-word;
    overflow: hidden;
    /* 默认不显示滚动条 */
    max-height: 200px;
    /* 根据需要设置最大高度 */
}

.card:hover .details .info {
    overflow-y: auto;
    /* 悬停时允许垂直滚动 */
}

.card .details .info {
    padding: 0px 2px;
    color: rgb(225, 225, 225);
    font-size: 20px;
    margin-top: 10px;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 200px;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #f3f3f3 transparent;
    /* Firefox */
}

.card .details .info::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.card .details .info::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #4B5563;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.card:hover .details .info {
    overflow-y: auto;
}

/* 隐藏滚动条的上下箭头按钮 */
.card .details .info::-webkit-scrollbar-button {
    display: none;
}

/* 隐藏滚动条的轨道，使其与滚动条滑块的背景色相同 */
.card .details .info::-webkit-scrollbar-track {
    background: #4B5563;
    /* 与滚动条滑块的背景色相同 */
}

/* 定义滚动条滑块的样式 */
.card .details .info::-webkit-scrollbar-thumb {
    background-color: #4B5563;
    /* 滚动条滑块的背景色 */
    border: 2px solid transparent;
    /* 透明边框，实现留白效果 */
    background-clip: padding-box;
    /* 使背景不延伸到边框区域 */
    border-radius: 10px;
    /* 滚动条滑块的圆角 */
}

/* 定义滚动条的尺寸 */
.card .details .info::-webkit-scrollbar {
    width: 15px;
    /* 根据需要调整宽度 */
    height: 15px;
    /* 根据需要调整高度 */
}


/* 悬停时显示滚动条 */
.card:hover .details .info {
    overflow-y: auto;
}

#Leadercards .details {

    width: 400px;
    margin: 30px 10px 30px 10px;
}

#Leadercards .details h3 {
    font-size: 30px;
    color: aliceblue;
}

#Leadercards .details .tag {
    position: relative;
    margin-top: 5px;
    font-weight: bold;
}

#Leadercards .details .tag span {
    padding: 5px;
    color: rgb(255, 255, 255);
    ;
}

#Leadercards .details .major {
    position: relative;
    margin-top: 5px;

}

#Leadercards .details .major span {
    padding: 5px;
    color: rgb(255, 255, 255);
    ;
}

#Leadercards .details .info {
    padding: 0px 2px;
    color: rgb(225, 225, 225);
    font-size: 20px;
    margin-top: 10px;
    word-wrap: break-word;
    overflow: hidden;
    /* 默认不显示滚动条 */
    max-height: 200px;
    /* 根据需要设置最大高度 */
}


@media screen and (max-width:1360px) {
    #cards2 {
        flex-wrap: wrap;
    }

    .cards {
        flex-wrap: wrap;
    }

    .card {
        margin: 20px;
    }
}

.box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.box .details {
    padding-left: 50px;
}

#Leadercards {
    align-items: flex-start;
}

#cards2people {
    padding: 50px 150px;
}